<script setup>

  import echarts from "echarts";

  const info = reactive({
    char1List:[
      {
        name: '张三',
        type: 'bar',
        stack: 'Total',
        data: [150, 230, 224, 2182, 135, 2147, 260,100],
      },
      {
        name: '李四',
        stack: 'Total',
        data: [1250, 2230, 224, 212, 135, 2147, 260,100],
        type: 'bar'
      }
    ],
    char2List:[
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' }
    ]
  })

  import {onMounted, reactive} from "vue";

  onMounted(()=>{
    let echarts = require('echarts')
    let char1 = echarts.init(document.getElementById('char1'));
    char1.setOption({
      title: {
        text: '测试多线条'
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','6666']
      },
      yAxis: {
        type: 'value'
      },
      series: info.char1List
    });

    //饼图
    let char2 = echarts.init(document.getElementById('char2'));
    char2.setOption({
      title: {
        text: '测试饼图'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: info.char2List,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
  })


</script>

<template>
  <div style="width: calc(100vw - 221);display: flex">
    <div id="char1" style="width: 50%;height:300px;display: flex;border: 1px solid #ccc">

    </div>
    <div id="char2" style="width: 50%;height:300px;border: 1px solid #ccc">

    </div>
  </div>
  <div style="width: calc(100vw - 221);display: flex">
    <div style="width: 50%;height:300px;display: flex;border: 1px solid #ccc">

    </div>
    <div style="width: 50%;height:300px;border: 1px solid #ccc">

    </div>
  </div>
</template>

<style scoped>

</style>